<template>
  <ul id="tree" class="treeview">
    <li v-for="item in itemGroup" :class="item.collapsed?'expandable':'collapsable'">
      <div @click.prevent="item.collapsed=!item.collapsed" class="hitarea"
           :class="item.collapsed?'expandable-hitarea':'collapsable-hitarea'"></div>
      <span>{{item.title}}</span>
      <ul class="child-view" v-if="item.items&&item.items.length>0"
          :style="item.collapsed?{display:'none'}:{diplay:'block'}">
        <li v-for="child of item.items">
          <a class="leaf" :class="child.type" @click.native.stop="()=>false" href="#" draggable="true"
             @dragstart="dragStart($event,child)">
            {{child.name}}
              </a>
        </li>
      </ul>
    </li>
  </ul>
</template>
<style scoped lang="scss">
  @import "../style/variables";

  body * {
    font-family: "微软雅黑", serif;
    font-size: 14px;
  }

  .treeview {
    padding: 0;
    margin: 0;
    list-style: none;
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      background-color: $tree-background-color;
      margin-top: 4px;
    }
    .hitarea {
      background: url(../assets/steps/9x9_arrow_up.png) 0 0 no-repeat;
      height: 16px;
      width: 16px;
      margin-left: -50px;
      float: left;
      cursor: pointer;
    }
    > li {
      margin-left: 20px;
      padding: 0 0 2px 23px;
    }
    li.collapsable {
      background: url("../assets/steps/open.png") 0 0 no-repeat;
    }
    li.expandable {
      background: url("../assets/steps/folder_connection.png") 0 0 no-repeat;
    }
    a {
      &:hover {
        background-color: $tree-hover-color;
        cursor: pointer;
      }
      text-decoration: none;
      color: black;
    }
    .expandable-hitarea {
      background: url(../assets/steps/9x9_arrow_down.png) 0 0 no-repeat;
    }
  }
  .child-view li {
    margin-left: -22px;
  }
</style>
<script>
  import {treeView} from "../model/DataModel";
  export default{
    data(){
      return {
        itemGroup: treeView() || [
          {
            title: "空列表",
            //[{name: "空操作", type: "Dummy"}]
            items: [],
            collapsed: false
          }
        ]
      }
    },
    methods: {
      dragStart(event, {name, type}){
        //IE只接受Text和URL类别的值
        event.dataTransfer.setData('Text', JSON.stringify({name, type, validator: 9999}));
      }
    }
  }
</script>
